<template>
  <!-- 右侧的组件示例面板 -->
  <div class="component-card">
    <component
      class="components-hover"
      :is="hoverComponent.tag"
      :show-icon="hoverComponent.showIcon"
      :type="hoverComponent.type"
      :size="hoverComponent.size"
      :placeholder="hoverComponent.placeholder"
      :style="hoverComponent.style"
      :value="hoverComponent.value"
      :max="hoverComponent.max"
      :min="hoverComponent.min"
    >
      {{ hoverComponent.describe }}
    </component>
  </div>
</template>
<script>
import { deepCopy } from '@/utils/help.js'
import museUiList from '@/components/list/muse-ui'
import mintUiList from '@/components/list/mint-ui'
import iViewUiList from '@/components/list/iview-ui' //我们引入的是二次封装的组件，iview的全局组件是不用引入的，直接用
export default {
  name: 'components',
  components: {
    ...museUiList,
    ...mintUiList,
    ...iViewUiList,
  },
  computed: {
    // 改变选择的ui库需要在vuex中存储起来
    activeUI: {
      get() {
        return this.$store.state.activeUI
      },
      set(val) {
        this.$store.commit('setState', {
          activeUI: val,
        })
      },
    },
  },
  data() {
    return {
      hoverComponent: {}, //悬浮的组件
    }
  },
  mounted() {
    this.$EventBus.$on('getExampleComponent', (data) => {
      this.hoverComponent = data
    })
  },

  methods: {
    // 开始拖拽组件
    dragStart(e) {
      let componentName = e.target.getAttribute('data-name')
      
      let info = {
        name: componentName,
        ui: this.activeUI,
        open: false, // 组件树是否展开
      }
      //通过e.dataTransfer方法来存储被拖拽组件的信息，这样在ondrop的时候可以获取这个组件
      e.dataTransfer.setData('info', JSON.stringify(info))
    },
  },
}
</script>
<style lang="less" scoped>
.component-card {
  padding: 10px;

  .components-hover {
    // background: #ddd;
    // color: #fff;
  }
}

.tips {
  padding-top: 20px;
  text-align: center;
  color: #666;
}
.tips-icon {
  position: absolute;
  right: 5px;
  color: #666;
  z-index: 1000;
}
</style>
